<template>
  <div>
    <el-dialog :title="form.id?'修改客户':'创建客户'" :visible.sync="dialogVisible" width="50%" center>

      <div>
        <el-form :model="form" ref="ruleForm" label-width="80px">

          <el-row>
            <!-- <el-col :span="12">
              <el-form-item label="客户编号">
                <el-input v-model="form.code" class="inputwidth"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="跟进人">
                <el-select filterable v-model="form.staff_id" placeholder="请选择跟进人">
                  <el-option v-for="(item,index) in stafft" :key="index" :label="item.realname" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="项目类型">
                <el-select v-model="form.type" placeholder="请选择项目类型">
                  <el-option v-for="(item,index) in type" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户姓名">
                <el-input v-model="form.realname" class="inputwidth"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司名称">
                <el-input v-model="form.company" class="inputwidth"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="QQ">
                <el-input v-model="form.qq" class="inputwidth"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信">
                <el-input v-model="form.wx" class="inputwidth"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号">
                <el-input v-model="form.phone" class="inputwidth"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="星级">
                <el-select v-model="form.star" placeholder="请选择星级">
                  <el-option v-for="(item,index) in status" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="客户来源">
                <el-select v-model="form.from_way" placeholder="请选择客户来源">
                  <el-option v-for="(item,index) in fromWay" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="需求">
                <el-input type="textarea" v-model="form.demand"></el-input>
              </el-form-item>
            </el-col>
          </el-row>



        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"  :loading="btnloading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    typeArry,
    statusArry,
    fromWayArry
  } from '@/common/arry.js';
  import {
    Message
  } from 'element-ui';

  export default {
    watch: {
      dialogVisible: {
        handler(v) {
          if (!v) {
            Object.keys(this.form).forEach(key => (this.form[key] = ''));
          }
        }
      }
    },
    data() {
      return {
        item: {},
        dialogVisible: false,
        form: {
          id: "",
          code: "",
          type: "",
          realname: "",
          company: "",
          qq: "",
          wx: "",
          phone: "",
          star: "",
          staff_id: "",
          demand: "",
          from_way:''
        },
        fromWay:fromWayArry,
        type: typeArry,
        status: statusArry,
        stafft: [],
        btnloading:false
      }
    },
    created() {
      this.getStafft()
    },
    methods: {
      getStafft() {
        this.axios.post("/user/belongTo", {

        }).then(res => {
          this.stafft = res.genjin;
        }).catch(error => {

        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            
            this.axios.post("/user/clientEdit", this.form).then(res => {
              this.btnloading=true;
              Message.success({
                message: "成功",
                onClose: (res) => {
                  this.btnloading=false;
                  this.dialogVisible = false;
                  this.$emit('update');
                }
              })
            }).catch(error => {
this.btnloading=false;
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        this.$nextTick(() => {
          this.$refs.ruleForm.resetFields();
        })
      },
      echo(item) {
        let {
          code,
          departmentId,
          company,
          phone,
          realname,
          demand,
          id,
          fromWay,
          qq,
          wx,
          type,
          staffName,
          star,
          staffId,

        } = item;
        this.form.code = code;
        this.form.company = company;
        this.form.phone = phone;
        this.form.demand = demand;
        this.form.fromWay = fromWay;
        this.form.id = id;
        this.form.qq = qq;
        this.form.wx = wx;
        this.form.type = type;
        this.form.staffName = staffName;
        this.form.star = star;
        this.form.realname = realname;
        this.form.staff_id = staffId;
        this.form.from_way=fromWay;

      }
    }
  }
</script>

<style scoped>

</style>
